const React = require('react');
const {View, StyleSheet} = require('react-native');
const {
    JDDevice,
    JDText,
    JDRouter,
    JDTouchable,
} = require('@areslabs/jdreact-core-lib');
const {NavigationBar} = JDRouter;

class JDTouchableExample extends React.Component {
    render() {
        return (
            <View style={styles.wrapper}>
                <NavigationBar Title="JDTouchable组件"/>
                <View style={styles.content}>
                    <JDText>
                        JDTouchable用于封装视图，使其可以正确响应触摸操作。
                    </JDText>
                    <View style={styles.touchContainer}>
                        <JDTouchable onPress={()=>{
                            alert('You pressed me')
                        }}>
                            <View style={styles.touchStyle}>
                                <JDText style={{color: '#fff'}}>
                                    press me
                                </JDText>
                            </View>
                        </JDTouchable>
                    </View>
                </View>


            </View>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,

    },
    content: {
        paddingTop: 10,
        paddingLeft: 10,
        paddingRight: 10,
    },
    touchContainer:{
        height:300,
        justifyContent:'center',
        alignItems:'center',
    },
    touchStyle: {
        width: 200,
        height: 40,
        backgroundColor: 'blue',
        justifyContent:'center',
        alignItems:'center',
    }

});

module.exports = JDTouchableExample;
